﻿<div style="display: flex; align-items: flex-end; margin-bottom: 0.75em; gap: 10px">
    <span>16x16: </span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Hamburger())" Width="16px" />
    <span>32x32: </span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Hamburger())" Width="32px" />
    <span>64x64: </span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Hamburger())" Width="64px" />
    <span>128x128: </span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Hamburger())" Width="128px" />
</div>

<FluentDivider Role=DividerRole.Presentation />

<div style="display: flex; align-items: center;  margin-top: 0.75em;">
    <label for="CustomSize">Custom size</label>
    <FluentTextField Id="CustomSize" @bind-Value="@custom" Placeholder="Just 1 number, like 128 or 256"/>
</div>

@if (int.TryParse(custom, out int size) && size > 0)
{
    <div style="display: flex; align-items: flex-end; margin-bottom: 0.75em; gap: 10px">
        <span>@(size)x@(size): </span>
        <FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Hamburger())" Width="@($"{size}px")" />
    </div>
}

@code {
    string custom = "";
}